<template>
  <rx-layout>
      <div slot="header" style="padding: 0px">
          <div class="rx-vue-user-tab">
              <ul>
                  <li :class="{'active':itemClickMenu == index}" v-for="(item,index) in headerMenu" :key="index"
                      @click="itemMenuClick(item,index)">
                      {{item.title}}
                  </li>
              </ul>
              <a-button type="primary" @click="saveTemplate" :loading="loading">
                  {{$ti18('rxForm.saveBtn','保存')}}
              </a-button>
          </div>
      </div>
      <div slot="left" showButton="true" width="180" class="left-card">
          <div class="left-card-head">
              {{i18n('list.templateType','模版类型')}}
          </div>
          <ul class="left-card-head-common">
              <li class="left-card-head-common-li"  v-for="(item, i) in treeData" :class="{ 'left-card-head-common-hover': i == currentMenu }" :key="i" @click="clickMenu(item, i)">
                  <a-tooltip placement="right">
                      <template slot="title">
                          {{ item.title }}
                      </template>
                      <div class="left-li-text">{{ item.title }}</div>
                  </a-tooltip>
              </li>
          </ul>
      </div>
      <div slot="center">
          <div style="height: 100%;overflow: hidden;display: flex;flex-direction: column;">
              <div class="bpm-common-news" v-if="message.hasTitle == 'YES' " style="display: flex;">
                  <div class="col-title">
                      {{i18n('list.messageTitle','消息标题')}}:&nbsp;
                  </div>
                  <div >
                      <a-input  v-model="title"></a-input>
                  </div>
              </div>
              <div class="bpm-common-news" v-if="message.type == 'sms' ">
                  <div>
                      {{i18n('list.templateKey','阿里云短信模板key')}}:&nbsp;
                  </div>
                  <div style="margin-top: 7px">
                      <a-input  v-model="templateKey"></a-input>
                  </div>
              </div>
              <div class="editor-container" style="height: calc(100% - 100px);padding:8px;">
                  <vue-ueditor-wrap
                      class="editbox"
                      v-model="template"
                      :init="init"
                      @ready="ready"
                      :config="editorConfig"
                      @beforeInit="addCustomButton"
                      style="border:solid 1px #ccc;height:100%"
                  >
                  </vue-ueditor-wrap>
              </div>
          </div>
      </div>
  </rx-layout>
</template>
<script>
import BpmDefaultTemplateApi from '@/api/bpm/core/bpmDefaultTemplate'
import {DomUtil, RxDialog} from '@lowcode/jpaas-common-lib'
import {templateTypeMap, templateTypes} from '@/views/modules/bpm/core/js/TemplateTypes'
import VueUeditorWrap from 'vue-ueditor-wrap'
import editAddButton from '@/views/modules/bpm/core/js/editAddButton'
import BpmMessageTemplateApi from '@/api/bpm/core/bpmMessageTemplate';
import UeditorConfig from "@/assets/js/UeditorConfig";

export default {
  name: 'BpmDefaultTemplateEdit',
  mixins: [editAddButton],
  components: {
    RxDialog,
    VueUeditorWrap,
  },

  data() {
    return {
      //消息类型
      msgType: '',
      templateKey:"",
      //模板类型
      templateType: '',
      //模板分类
      treeData: [],
      //选中模板ID
      curId: '',
      //模板
      template: '',
      //保存按钮是加载
      loading: false,
      editor: '',
      editorConfig: UeditorConfig,
      currentMenu: 0, //左边点击的index
      headerMenu: [],
      itemClickMenu: 0, //头部点击的index
      subList: [],
        title:'',
        message: {},
        messages: [],
        bpmInstFields:[],
    }
  },
  created() {
    this.getTemplates()

    this.getBpmInstFields();
  },
  methods: {
      i18n(name,text,key){
          return this.$ti18(name,text,"bpmDefaultTemplate",key);
      },
      getBpmInstFields(){
          BpmMessageTemplateApi.getBpmInstPublicField().then(res=>{
              this.bpmInstFields = res.data;
          })
      },
      onSelectBpmInstField(item,i,checked){
          this.insertField=checked;
          let obj = item
          let html="";
          if(this.insertField){
              html="${" + obj.name + "}";
          }else{
              html=obj.comment;
          }
          if(this.titleShow){
              this.title += html;
          }else {
              this.editor.execCommand('inserthtml',html);
          }
      },
    itemMenuClick(item, i) {
        this.itemClickMenu = i

        let obj = item
        let self_ = this;
        this.message = this.messages[item.messageType];
        BpmDefaultTemplateApi.get(obj.id).then((res) => {
            let data = res.data
            self_.title = data.title
            self_.template = data.template
            self_.curId = data.id
            if(self_.message.type =='sms'){
                self_.templateKey = data.templateKey;
            }
        })
    },
    clickMenu(item, i) {
      this.message = this.messages[item.messageType];
      this.currentMenu = i
      this.headerMenu = item.children
      this.itemMenuClick(item.children[this.itemClickMenu], this.itemClickMenu)
    },
    async getTemplates(leftIndex = 0, headerIndex = 0) {
      //消息类型对象{mail:"邮件"}
      let messageType = {}

      let _this = this;
      //获取消息类型
      let types = await BpmDefaultTemplateApi.getMessageHandler()
      types.forEach(function (el, index) {
        messageType[el.type] = el.name
        _this.messages[el.type]=el;
      })
      BpmDefaultTemplateApi.getAllOrderBy().then((res) => {
        var temlpates = res.data

        /*{  approve:[{key:"",title:"",template:"",messageType:"",templateType:""}]}*/
        let typeGroup = {}
        for (let template of temlpates) {
          if(!messageType[template.messageType]){
              continue;
          }
          //消息类型名称
          template.msgTypeName = messageType[template.messageType];

          //模板名称
          template.templateTypeName = templateTypeMap[template.templateType]

          let obj = typeGroup[template.templateType]
          template.key = template.id
          template.title = template.msgTypeName
          if (obj) {
            obj.push(template)
          } else {
            typeGroup[template.templateType] = [template]
          }
        }

        /*
          构造模板树型
                        [{
                            key:"模板类型",
                            title:"类型名称",
                            //模板列表
                            children:[
                                {key:"",title:"",template:"",messageType:"",templateType:""}
                            ]
                        }]
                        */
        let treeData = []
        for (let tempType of templateTypes) {
          let obj = { key: tempType.value, title: tempType.label }
          obj.children = typeGroup[tempType.value]
          treeData.push(obj)
        }
        this.treeData = treeData
        this.headerMenu = this.treeData[leftIndex].children
        this.itemMenuClick(this.treeData[leftIndex].children[headerIndex], headerIndex)
      })
    },
    onSelectTemplate(selectedKeys, e) {
      let obj = e.node._props.dataRef
      BpmDefaultTemplateApi.get(obj.id).then((res) => {
        let data = res.data
        this.template = data.template
        this.curId = data.id
      })
    },
    ready(editor) {
      this.editor = editor
    },
    init() {

    },
    /**
     * 表单模板。
     */
    saveTemplate() {
      this.loading = true
      let obj = {
        id: this.curId,
        template: this.template,
        title:this.title,
        templateKey: this.templateKey
      }
      BpmDefaultTemplateApi.saveTemplate(obj).then((res) => {
        this.loading = false
        this.getTemplates(this.currentMenu, this.itemClickMenu)
      })
    },
  },
}
</script>
<style scoped>

.col-title{
    float:left;
    min-width:100px;
    font-weight: bold;
    text-align: right;
    line-height: 34px;
}

.toolbar {
    text-align: right;
    padding: 4px 10px 4px 4px;
    border-bottom: 1px solid #dfdfdf;

}
.toolbar button{
    margin-left: 5px;
}
.bpm-common-news{
    padding: 13px;
    font-size: 14px;
}
.rxMylayout >>>.ant-collapse-content > .ant-collapse-content-box{
    padding: 0px 12px 12px 12px!important;
}

.rx-vue-user-tab{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.rx-vue-user-tab ul {
    font-size: 0;
}

.rx-vue-user-tab ul li {
    display: inline-block;
    font-size: 14px;
    padding: 0 10px;
    line-height: 30px;
    border-radius: 4px;
    margin-right: 20px;
    position: relative;
    color: #555555;
    cursor: pointer;
}

.rx-vue-user-tab ul li.active {
    background-color: #4285f4;
    color: #fff;
}

.rx-vue-user-tab ul li.active:before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 6px solid #4285f4;
    border-right: 6px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 6px solid transparent;
    position: absolute;
    left: 50%;
    margin-left: -6px;
    bottom: -7px;
}
.left-card-head-common-li .left-li-text{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.left-card-head-common{
    padding:10px;
}
.left-card-head-common li {
    height: 30px;
    line-height: 30px;
    padding: 0px 8px;
    margin-bottom: 2px;
    color: #46494d;
    font-size: 14px;
    cursor: pointer;
}
.left-card-head-common-hover{
    background-color: #ecf3fe;
    border-radius: 4px;
    color: #4285f4!important;
    font-weight: revert;
}
.left-card-head-common li:hover{
    background-color: #ecf3fe;
    border-radius: 4px;
    color: #4285f4;
    font-weight: revert;
}
.left-card-head{
    height: 30px;
    background-color: #f5f7fa;
    color: #46494d;
    font-size: 14px;
    line-height: 30px;
    padding-left: 10px;
    border-bottom: 1px solid #e6e8eb;
}
</style>
